<template>
  <div>
    <div>{{$store.state.userName}}</div>
    <h1>vuex的简单使用</h1>
    <div v-for="(item, i) in arr" :key="i">
      <span @click="addSum(i)">{{ item.sum }}</span>
      <span> {{ item.familyMemberName }} </span>
      <span> {{ item.relationName }} </span>
      <span>{{ userName }}</span>
      <span @click="addCount(i)">{{ item.count }}</span>
      <span>hahhahh哈哈</span>
      <span @click="addCount1(i)">{{ item.count2 }}</span>
    </div>
    <div>
      <span> 我是userInfo</span>
      <span>{{ userInfo }}</span>
    </div>
    <h1>小结：</h1>
    <p>1、</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["arr", "userName"]), //这是下面分别监听每个字段的简写
    // arr() {
    //   return this.$store.state.arr;
    // },
    // userName(){
    //     return this.$store.state.userName;
    // }
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  data() {
    return {};
  },
  methods: {
    addCount(index) {
      //mutation提交 普通提交
      this.$store.commit("increment", index);
    },
    addSum(index) {//负载提交
      this.$store.commit({
        type: "sum",
        index,
      });
    },
    addCount1(index){  //action提交
        //调用
        this.$store.dispatch({
            type:'increment1',
            index
        })

    }
  },
  mounted() {
    //通过getter方法对数据进行处理
    console.log(this.$store.getters.getBygender("李四"));
  },
};
</script>